<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8"/>
    <title>Accessibility Report For "{url}" ({date})</title>

    <style>

		html, body {
			margin: 0;
			padding: 0;
			background-color: #fff;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 16px;
			line-height: 22px;
			color: #333;
		}
		li {
			margin-bottom: 15px;
		}
		h1, h2, p, pre, ul {
			margin-top: 0;
			margin-bottom: 0;
		}
		h1 {
			margin-bottom: 10px;
			font-size: 24px;
			line-height: 24px;
		}
		h2 {
			font-size: 16px;
		}
		pre {
			white-space: pre-wrap;
			overflow: auto;
		}

		.page {
			max-width: 800px;
			margin: 0 auto;
			padding: 25px;
		}

		.counts {
			margin-top: 30px;
			font-size: 20px;
		}
		.count {
			display: inline-block;
			padding: 5px;
			border-radius: 5px;
			border: 1px solid #eee;
		}

		.clean-list {
			margin-left: 0;
			padding-left: 0;
			list-style: none;
		}
		.results-list {
			margin-top: 30px;
		}

		.result {
			padding: 10px;
			border-radius: 5px;
			border: 1px solid #eee;
		}
		.error {
			background-color: #fdd;
			border-color: #ff9696;
		}
		.warning {
			background-color: #ffd;
			border-color: #e7c12b;
		}
		.notice {
			background-color: #eef4ff;
			border-color: #b6d0ff;
		}

	</style>

</head>
<body>

	<div class="page">

		<h1>Accessibility Report For "{url}"</h1>
		<p>Generated at: {date}</p>

		<p class="counts">
			<span class="count error">{errorCount} errors</span>
			<span class="count warning">{warningCount} warnings</span>
			<span class="count notice">{noticeCount} notices</span>
		</p>

		<ul class="clean-list results-list">
			{results|raw}
		</ul>

	</div>

</body>
</html>
